<template>
  <swiper
    :indicator-dots="indicatorDots"
    :interval="interval"
    :autoplay="autoplay"
    :circular="loop"
    :duration="duration"
  >
    <block
      v-for="(item,index) in items"
      :key="index"
    >
      <swiper-item>
        <image
          :src="item.thumb"
          mode="scaleToFill"
        ></image>Î
      </swiper-item>
    </block>
  </swiper>
</template>
<script>
// import { Loading, Image, Button, Swipe, SwipeItem } from 'vant'
export default {
  name: 'SwiperBanner',
  components: {
    // [Loading.name]: Loading,
    // [Image.name]: Image,
    // [Swipe.name]: Swipe,
    // [SwipeItem.name]: SwipeItem,
    // [Button.name]: Button
  },
  props: {
    value: {
      type: Array,
      required: true
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    loop: {
      type: Boolean,
      default: true
    },
    ratio: {
      type: [Number, Boolean],
      default: 0
    },
    radius: {
      type: [String, Number],
      default: 0
    },
    duration: {
      type: Number,
      default: 300
    },
    interval: {
      type: Number,
      default: 5000
    },
    indicatorDots: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      current: 0,
      num: 0 // 这个是用来计数，防止用户连续点击出现setTimeout重复调用导致用户体验差
    }
  },

  computed: {
    scaleClass () {
      if (this.ratio !== false) {
        return 'swipe-scale'
      }
      return ''
    },
    itemStyle () {
      const styles = {}
      if (this.ratio !== false) {
        const ratio = Math.abs(this.ratio)
        if (ratio !== 0) {
          styles['--scalebox-ratio'] = `${100 / ratio}%`
        }
      }
      return styles
    },
    gutterStyle () {
      if (this.gutter) {
        const gutter = this.addUnit(this.gutter)
        return {
          padding: `0 ${gutter}`
        }
      }
      return null
    },
    indicatorStyle () {
      const styles = {}
      if (this.indicatorColor) {
        styles['color'] = this.indicatorColor
      }
      if (this.gutter) {
        const gutter = this.addUnit(this.gutter)
        return {
          'padding-right': `${gutter}`
        }
      }
      return styles
    },
    items () {
      if (this.value.length > 0) {
        const data = []
        for (let i = 0, c = this.value.length; i < c; i++) {
          if (typeof this.value[i] === 'string') {
            data.push({
              url: this.value[i]
            })
          } else if (typeof this.value[i] === 'object') {
            data.push(this.value[i])
          }
        }
        console.log('items', data)
        return data
      }
      return []
    }
  },

  methods: {
    onChange (index) {
      this.current = index
    },
    onClick () {
      console.log(this.current)
      console.log(this.items)
      console.log(this.items[this.current])
      this.$emit('click', this.current, this.items[this.current])
    },
    addUnit (value) {
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// .swipe-scale {
//     .swipe-item /deep/  {
//       position: relative;

//       &::after {
//         padding-top: var(--scalebox-ratio);
//         content: "";
//         width: 100%;
//         display: block;
//       }

//       .van-image {
//         width: 100%;
//         height: 100%;
//         display: block;
//         margin: 0 auto;
//         position: absolute;
//         left: 0;
//         top: 0;
//       }

//       img {
//         display: block;
//       }
//   }
// }
image {
  width: 100%;
}
.number-indicator {
  position: absolute;
  bottom: 10px;
  right: 12px;
  color: #fff;
  letter-spacing: 2px;
  font-family: "RemingaTitlingRegular";
  &__length {
    opacity: 0.8;
    font-size: 80%;
  }
  &__active {
    font-size: 140%;
    opacity: 1;
  }
}
</style>
